<template>
	<view class="container">
		<!-- 顶部Tab切换 - 固定 -->
		<view class="tab-section fixed-tab">
			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" :scrollable="false" lineColor="#2979ff"
				:activeStyle="{
          color: '#2979ff',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }" :inactiveStyle="{
          color: '#666',
          transform: 'scale(1)'
        }" itemStyle="padding-left: 0; padding-right: 0; height: 80rpx;"></u-tabs>
		</view>

		<!-- 内容区域 -->
		<view class="content-with-tab">
			<!-- 任务列表 -->
			<scroll-view class="task-list" scroll-y @scrolltolower="loadMore" :refresher-enabled="true"
				:refresher-triggered="refreshing" @refresherrefresh="onRefresh" :scroll-top="scrollTop"
				scroll-with-animation>
				<!-- 阶段任务组 -->
				<view v-for="(task,index) in stageTaskList" :key="task.id" class="stage-section">

					<!-- 阶段任务列表 -->
					<view class="stage-tasks">
						<view class="stage-task-item"
							@click="viewTaskDetail(task)">
							<!-- 左侧任务内容 -->
							<view class="task-content">
								<view class="task-main">
									<text class="task-name">{{ task.stageName }}</text>
								</view>
								<view class="task-time">
									<u-icon name="clock" size="14" color="#999"></u-icon>
									<text class="time-text">{{ task.startTime }} - {{task.endTime}}</text>
								</view>

							</view>

							<!-- 右侧查看详情箭头 -->
							<view class="task-action">
								<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="loading">
					<u-loading-icon size="20"></u-loading-icon>
					<text class="loading-text">加载中...</text>
				</view>

				<view class="no-more" v-if="!hasMore && stageTaskList.length > 0">
					<text class="no-more-text">没有更多任务了</text>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="stageTaskList.length === 0 && !loading">
					<u-icon name="list" size="120" color="#ccc"></u-icon>
					<text class="empty-text">
						{{ currentTab === 0 ? '暂无未完成任务' : '暂无已完成任务' }}
					</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		selectPhaseTasks
	} from '@/common/api/renwu.js'
	export default {
		data() {
			return {
				// Tab 数据
				tabList: [{
						name: '未完成',
						value: 1
					},
					{
						name: '已完成',
						value: 2
					}
				],
				currentTab: 0,

				// 滚动控制
				scrollTop: 0,

				// 阶段任务列表数据
				stageTaskList: [],
				page: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				refreshing: false,
				task_id: '',
				target:null
			}
		},

		computed: {
			// 当前Tab对应的接口状态参数（从tabList取value，无需硬编码）
			currentTaskStatus() {
				return this.tabList[this.currentTab].value
			}
		},

		onLoad(options) {
			this.task_id = options.id
			this.target = options.target
			this.loadStageTaskList()
		},

		methods: {
			// 加载阶段任务列表
			async loadStageTaskList(isRefresh = false) {
				if (this.loading) return

				this.loading = true

				if (isRefresh) {
					this.page = 1
					this.hasMore = true
				}

				try {
					let params = {
						id: this.task_id,
						sourceType: 1, //（0 开门红业务上报 1 我的任务业绩上报）
						status: this.currentTaskStatus,
						pageNum: this.page, // 当前页码
						pageSize: this.pageSize, // 每页条数
					}
					let res = await selectPhaseTasks(params)
					let rwlist = res.data.records
					console.log(rwlist, '-----阶段')


					if (isRefresh) {
						this.stageTaskList = rwlist
					} else {
						this.stageTaskList = [...this.stageTaskList, ...rwlist]
					}

					// 判断是否还有更多数据
					// this.hasMore = this.stageTaskList.length < currentStages.length

					this.page++

				} catch (error) {
					console.error('加载阶段任务列表失败:', error)
					uni.showToast({
						title: error,
						icon: 'none'
					})
				} finally {
					this.loading = false
					this.refreshing = false
				}
			},

			// Tab切换
			onTabChange(item) {
				// 先滚动到顶部
				this.scrollToTop()
				// 延迟切换数据，确保滚动完成
				console.log(item)
				setTimeout(() => {
					this.currentTab = item.index
					this.page = 1
					this.stageTaskList = []
					this.hasMore = true
					this.loadStageTaskList(true)
				}, 100)
			},

			// 滚动到顶部
			scrollToTop() {
				this.scrollTop = 0
				this.$nextTick(() => {
					this.scrollTop = Math.random()
				})
			},

			// 触底加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.loadStageTaskList()
				}
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true
				this.loadStageTaskList(true)
			},

			// 获取优先级类型
			getPriorityType(priority) {
				const typeMap = {
					'high': 'error',
					'medium': 'warning',
					'low': 'primary'
				}
				return typeMap[priority] || 'default'
			},

			// 获取进度条颜色
			getProgressColor(progress) {
				if (progress >= 80) return '#19be6b'
				if (progress >= 50) return '#2979ff'
				if (progress >= 20) return '#ff9900'
				return '#ff4444'
			},

			// 查看任务详情
			viewTaskDetail(task) {
				// 实际项目中可以跳转到详情页面
				uni.navigateTo({
					url: `/homeNav/rwgl/active_rwxq?task_id=${this.task_id}&phaseGoalId=${task.target}&target=${this.target}&phase=0`
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
		height: 100vh;
		overflow: hidden;
	}

	/* 固定Tab区域 */
	.fixed-tab {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.content-with-tab {
		margin-top: 80rpx;
		/* Tab高度 */
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 任务列表 */
	.task-list {
		height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 阶段区域 */
	.stage-section {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	/* 阶段头部 */
	.stage-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background: linear-gradient(135deg, #f8f9fa, #e9ecef);
		border-bottom: 1rpx solid #f0f0f0;
	}

	.stage-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.stage-progress {
		font-size: 28rpx;
		font-weight: 600;
		color: #2979ff;
		background: #e6f7ff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	/* 阶段任务列表 */
	.stage-tasks {
		padding: 0;
	}

	.stage-task-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background-color 0.3s;
		position: relative;
	}

	.stage-task-item:last-child {
		border-bottom: none;
	}

	.stage-task-item:active {
		background-color: #f8f9fa;
	}

	/* 左侧任务内容 */
	.task-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.task-main {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.task-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		flex: 1;
		margin-right: 15rpx;
		line-height: 1.4;
	}

	.priority-tag {
		margin-right: 0 !important;
		flex-shrink: 0;
	}

	.task-time {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.time-text {
		font-size: 24rpx;
		color: #666;
		margin-left: 8rpx;
		line-height: 28rpx;
	}

	.task-progress-info {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.progress-label {
		font-size: 24rpx;
		color: #999;
		min-width: 120rpx;
	}

	.progress-bar {
		flex: 1;
		height: 6rpx;
		background: #f0f0f0;
		border-radius: 3rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		border-radius: 3rpx;
		transition: all 0.5s ease;
	}

	.progress-value {
		font-size: 24rpx;
		color: #666;
		min-width: 60rpx;
		text-align: right;
	}

	/* 右侧查看详情箭头 */
	.task-action {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		transition: background-color 0.3s;
	}

	.stage-task-item:active .task-action {
		background-color: #f0f0f0;
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
		color: #999;
	}

	.loading-text {
		margin-left: 15rpx;
		font-size: 26rpx;
	}

	.no-more-text {
		font-size: 26rpx;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 120rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		.empty-text {
			font-size: 28rpx;
			color: #999;
			display: block;
			margin-top: 20rpx;
		}

		.empty-desc {
			font-size: 24rpx;
			color: #ccc;
			display: block;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}

		.empty-action {
			background: #2979ff;
			color: #fff;
			border: none;
			border-radius: 12rpx;
			padding: 20rpx 40rpx;
			font-size: 26rpx;
		}
	}

	/* 悬浮操作按钮 */
	.floating-action {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		z-index: 1000;
	}

	.fab-btn {
		background: linear-gradient(135deg, #2979ff, #4a90e2);
		color: #fff;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(41, 121, 255, 0.4);
		transition: all 0.3s;
	}

	.fab-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 10rpx rgba(41, 121, 255, 0.6);
	}
</style>

<style lang="scss">
	/* 全局样式调整 */
	.u-tabs {
		padding: 0 30rpx !important;
	}

	.u-tabs__wrapper {
		height: 80rpx !important;
	}

	.u-tag {
		margin-right: 0 !important;
	}
</style>